<template>
  <section class="orderItem">
    <div class="faceWrap"><i class="faceIcon" :style="{background:'url('+ faceUrl + ') no-repeat center center', backgroundSize:'cover'}"></i></div>
    <div class="infoWrap">
      <h2 class="titleText"><slot name="title">订单交流的话题</slot></h2>
      <div class="perTxt">
        <p class="personWrap"><mark class="mark"><slot name="name">姓名</slot></mark><slot name="info">个人的领域介绍</slot></p>
        <span v-if="bool" class="ticketIcon"></span>
      </div>
      <p class="meetTime" v-if="showTime"><span>时间：<slot name="meetTime">双方协商</slot></span>--<span><slot name="endTime">双方协商</slot></span></p>
      <div class="wait">
        <span class="waitStatus"><slot name="status">等待确认</slot></span>
        <div class="color">
          <span class="money">¥<slot name="money">0.00</slot></span>
          <span class="time"><slot name="time">约1小时</slot></span>
          </div>
        </div>
    </div>
  </section>
</template>
<script>
export default {
  props:{
    showTime: {
      default: true
    },
    bool: {
      default: false,
    },
    faceUrl: {
      default: ''
    }
  },
  data () {
    return {
      defaultFace: ''
      
    }
  }
}
</script>
<style lang="less" scoped>
.orderItem {
  width: 3.55rem;
  //height: 1.25rem;
  background: white;
  border-radius: .04rem;
  margin: 0 auto;
  display: flex;
  .ticketIcon {
    width: .16rem;
    height: .16rem;
    background: url("../../assets/img/icon_shape@3x.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    padding-right: .15rem;
    float: right;
    box-sizing: border-box;
  }
  .infoWrap {
    width: 2.8rem;
    height: 100%;
    flex: 1;
    padding-top: .2rem;
    box-sizing: border-box;
    .titleText {
      color: #555555;
      font-size: .16rem;
      font-weight: 500;
    }
    .wait {
      padding-right: .15rem;
      border-top: .01rem dashed #CFCFCF;
      height: .32rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .color {
        color: #888888;
      }
      .waitStatus {
        color: #39393D;
        font-size: .13rem;
      }
    }
    .meetTime {
      font-size: .12rem;
      padding: .06rem 0;
      color: #828282;
      display: -webkit-flex;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding-right: 0.15rem;
    }
    .perTxt {
      padding: .11rem .15rem 0 0;
      height: .2rem;
      line-height: .2rem;
      font-size: .12rem;
      color: #828282;
      display: flex;
      justify-content: space-between;
      .personWrap {
        width: 2.4rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        .mark {
          font-size: .14rem;
          color: #39393D;
          padding-right: .1rem;
          background: white;
        }
      }
    }
  }
  .faceWrap {
    width: .71rem;
    height: 100%;
    padding-top: .2rem;
    box-sizing: border-box;
    .faceIcon {
      display: block;
      border-radius: 50%;
      width: .42rem;
      height: .42rem;
      margin: 0 auto;
      background-size: cover !important;
    }
  }
}

</style>

